<template>
	<view class="container">
		<!-- 我的雇员列表 -->
		<view class="list">
			<view class="employee-info" v-for="item in staffList" :key="item.userId"
				@click="handleOpenDetail(item.userId)">
				<view>
					<view
						:class="[item.userIdentityStatus==0&&'avatar-pic-vip1',item.userIdentityStatus==1&&'avatar-pic-vip2',item.userIdentityStatus==2&&'avatar-pic-vip3']"
						:style="{top: item.vipFlag ? (15 +'rpx') : 0}">
						<image class="image" :src="imgPath + item.avatar" mode="aspectFill"></image>
						<!-- <image v-if="item.vipFlag" class="crown" src="/static/crown.png" mode="aspectFill"></image> -->
						<!-- 	<view v-if="item.vipFlag" class="vip-crown">
							<image src="@/static/icon3/adasdasd.png" mode="aspectFill"></image>
							<text>金牌</text>
						</view> -->
					</view>
					<view>
						<view>
							<text>{{ item.userName }}</text>
							<!-- <image src="/static/icon1/21.png" mode="aspectFill"></image> -->
							<view v-if="item.sex==0" class="sex-nan">
								<image class="sex-image" src="https://images.linglinggong.net/static/icon3/nna1111.png"
									mode="aspectFill"></image>
								{{!item.age ? '未知' : item.age}}
							</view>
							<view v-if="item.sex==1" class="sex-nv">
								<image class="sex-image" src="https://images.linglinggong.net/static/icon3/nv111.png"
									mode="aspectFill"></image>
								{{!item.age ? '未知' : item.age}}
							</view>
						</view>
						<view class="cxDiv">
							<view class="cx">
								<text>评分</text>
								<text>{{ item.employeeRating }}</text>
							</view>
							<text class="fg">|</text>
							<view class="cx">
								<text>好评率</text>
								<text>{{ item.haoping }}%</text>
							</view>
						</view>
					</view>
				</view>
				<view>
					<text>成交单数</text>
					<text>{{ item.receiveNum }}</text>
				</view>
			</view>
		</view>
		<!-- 加载 -->
		<!-- <uni-load-more :status="hasFlag ? 'loading' : isNoMore ? 'noMore' : ''"></uni-load-more> -->
	</view>
</template>
<script>
	import uniLoadMore from '@/components/uni-load-more/uni-load-more.vue'
	import {
		get_praise_or_goodFaith,
		he_evaluate_lv
	} from '../../../libs/unit.js'
	export default {
		data() {
			return {
				hasFlag: false, //是否加载完成
				imgPath: '', //图片路径
				requestObj: {
					pageNum: 1,
					pageSize: 1000,
				},
				staffList: [], //雇员列表
				praise_or_goodFaith: 9,
			}
		},
		methods: {
			// 打开雇员详情
			handleOpenDetail(staffId) {
				uni.navigateTo({
					url: '/pages/employer-detail/employee-detail?staffId=' + staffId
				})
			},
			// 返回上一页
			handleBeforePage() {
				this.$refs.handleBeforePage.handleBeforePage();
			},
			// 获取我的雇员
			async my_hire() {
				let res = await this.$fetch(this.$api.my_hire, this.requestObj, 'POST')
				if (res.code) return uni.showToast({
					title: res.msg,
					icon: 'none'
				})
				let haoping = uni.getStorageSync('heEvaluateLv') ? uni.getStorageSync('heEvaluateLv') : []
				await res.rows.forEach((e) => {
					if (haoping.indexOf(e.userId) != -1) {
						e.haoping = haoping[haoping.indexOf(e.userId) + 1]
					} else {
						he_evaluate_lv(e.userId).then((v) => {
							this.$set(e, 'haoping', v)
						})
					}
				})
				this.staffList = res.rows
				// console.log('this.staffList',this.staffList)
			},
		},
		onLoad() {
			this.imgPath = uni.getStorageSync('imgPath')
			// get_praise_or_goodFaith().then((v) => {
			// 	this.praise_or_goodFaith = v
			// })
		},
		onShow() {
			this.my_hire()
		},
		onNavigationBarButtonTap(e) {
			uni.navigateTo({
				url: '/pages/app-employer/my-employee/my-blackList'
			})
		},
		onShareAppMessage() {
			return {
				title: "足不出户，免费招工",
				desc: "线上招募零工，工价透明，免费使用",
				path: `/pages/start-n/start-n`,
				imageUrl: 'https://images.linglinggong.net/static/employer-share.jpg',
				success: res => {}
			}
		},
	}
</script>
<style lang="less">
	.container {
		overflow: hidden;

		&>.list {
			margin-top: 30rpx;
			background-color: #FFFFFF;

			&>.employee-info {
				background-color: #FFFFFF;
				padding: 30rpx;
				border-bottom: 1px solid #F2F2F2;
				display: flex;
				align-items: center;
				justify-content: space-between;

				&>view {
					display: flex;

					&>.avatar {
						display: flex;
						flex-direction: column;
						align-items: center;
						position: relative;
						margin-right: 30rpx;

						&>.avatar-pic {
							width: 108rpx;
							height: 108rpx;
							border-radius: 50%;
						}

						&>.crown {
							position: absolute;
							left: -10rpx;
							top: -40rpx;
							width: 78rpx;
							height: 59rpx;
						}
					}

					&>view {
						display: flex;
						flex-direction: column;

						&>view:first-child {
							display: flex;
							margin-bottom: 20rpx;
							align-items: center;

							&>text {
								margin-right: 20rpx;
								height: 48rpx;
								font-size: 17px;
							}

							&>image {
								width: 26rpx;
								height: 26rpx;
							}
						}
					}
				}

				&>view:last-child {
					flex-direction: column;
					text-align: right;

					&>text:first-child {
						margin-bottom: 2rpx;
						height: 34rpx;
						font-size: 12px;
						color: rgba(64, 33, 16, 0.70);
					}

					&>text:last-child {
						height: 60rpx;
						font-weight: bold;
						font-size: 22px;
						color: #F39B19;
					}
				}
			}
		}
	}

	.fg {
		font-size: 24rpx;
		color: #7F7F7F;
		line-height: 49rpx;
		margin: 0 20rpx;
	}

	.cx {
		font-size: 24rpx;
		font-weight: 400;
		color: #7F7F7F;
		line-height: 49rpx;

		&>text:nth-last-child(1) {
			color: #FE4B28;
			margin-left: 8rpx;
		}
	}

	.cxDiv {
		display: flex;
		flex-direction: row;
	}

	.sex-nan {
		width: 73rpx;
		height: 32rpx;
		background: #1CAAEA;
		border-radius: 4rpx;
		margin-left: 8rpx;
		display: flex;
		flex-direction: row;
		justify-content: center;
		align-items: center;
		font-size: 20rpx;
		font-weight: 400;
		color: #FFFFFF;
		line-height: 20rpx;
	}

	.sex-nv {
		width: 73rpx;
		height: 32rpx;
		background: #F90865;
		border-radius: 4rpx;
		margin-left: 8rpx;
		display: flex;
		flex-direction: row;
		justify-content: center;
		align-items: center;
		font-size: 20rpx;
		font-weight: 400;
		color: #FFFFFF;
		line-height: 20rpx;
	}

	.sex-image {
		width: 17rpx;
		height: 17rpx;
		margin-right: 9rpx;
	}

	.vip-crown {
		// width: 148rpx;
		padding: 0 10rpx;
		height: 32rpx;
		background: linear-gradient(0deg, #111832, #343B54);
		border-radius: 16rpx;
		position: absolute;
		top: 78rpx;
		display: flex;
		flex-direction: row;
		justify-content: center;
		align-items: center;

		&>image {
			width: 28rpx;
			height: 28rpx;
			margin-right: 4rpx;
		}

		&>text {
			font-size: 20rpx;
			font-weight: 500;
			color: #FCC928;
			line-height: 32rpx;
		}
	}

	.avatar-pic-vip {
		width: 105rpx;
		height: 105rpx;
		border-radius: 50%;
		border: 3rpx solid #FCC928;
	}

	// .vip-avatar {
	// 	width: 130rpx;
	// 	height: 130rpx;
	// 	background-image: url(../../../static/icon3/7868789.png);
	// 	background-size: cover;
	// }
	.avatar-pic-vip1 {
		width: 105rpx !important;
		height: 105rpx !important;
		border-radius: 50%;
		background: url('https://images.linglinggong.net/static/icon3/1.png') center center/cover no-repeat;
		display: flex !important;
		align-items: center !important;
		justify-content: center !important;

		.image {
			width: 85rpx !important;
			height: 85rpx !important;
			border-radius: 50% !important;
		}
	}

	.avatar-pic-vip2 {
		width: 105rpx !important;
		height: 105rpx !important;
		border-radius: 50%;
		background: url('https://images.linglinggong.net/static/icon3/2.png') center center/cover no-repeat;
		display: flex !important;
		align-items: center !important;
		justify-content: center !important;

		.image {
			width: 85rpx !important;
			height: 85rpx !important;
			border-radius: 50% !important;
		}
	}

	.avatar-pic-vip3 {
		width: 105rpx !important;
		height: 105rpx !important;
		border-radius: 50%;
		background: url('https://images.linglinggong.net/static/icon3/3.png') center center/cover no-repeat;
		display: flex !important;
		align-items: center !important;
		justify-content: center !important;

		.image {
			width: 70rpx !important;
			height: 70rpx !important;
			border-radius: 50% !important;
			margin-top: 19rpx;
		}
	}
</style>